import { GoToDocsButton } from '../component/GoToDocsButton';

<GoToDocsButton
  href="https://tolgee.io/js-sdk/integrations/react/installation"
  style={{ float: 'right' }}
/>

To read full documentation about Tolgee for React, visit [docs](https://tolgee.io/js-sdk/integrations/react/installation).

## Install the packages

You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook.

```sh
npm install @tolgee/react
```

## Setup your environment

Add this to your `.env.development.local`.

```dotenv
VITE_APP_TOLGEE_API_URL={{{apiUrl}}}
VITE_APP_TOLGEE_API_KEY={{{apiKey}}}
```

## Use TolgeeProvider

Wrap your main `App` component with Tolgee provider.

```typescript jsx
import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'en',

    // for development
    apiUrl: import.meta.env.VITE_APP_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_APP_TOLGEE_API_KEY,

    // for production
    staticData: {
      ...
    }
  });

...

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <App />
</TolgeeProvider>
```

## Use Tolgee!

```typescript jsx
import { T } from "@tolgee/react";

...

<T keyName="translation_key" />
```

or

```typescript jsx
import { useTranslate } from "@tolgee/react";

...

const { t } = useTranslate();

...

t("key_to_translate")
```

## Prepare for production

To prepare your App for production, choose a suitable option described
[here](https://tolgee.io/js-sdk/integrations/react/installation#preparing-for-production).
